<!-- 模板布局选择器 -->
<template>
	<canvas ref="DLayer" class="d-layer"></canvas>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick, watch } from 'vue';
import { GridLayer } from '../DGridSelect/GridLayer.js';
const props = withDefaults(defineProps<{
	templateOptions: AnyObject,
	onDeleteArea?: (area: AnyObject) => void,
}>(), {
	onDeleteArea: () => {},
});
const layer =ref<AnyObject>()
const DLayer = ref<HTMLCanvasElement>()

function init() {
	
	layer.value = new GridLayer(
		DLayer.value,
		props.templateOptions.rowNum,
		props.templateOptions.colNum,
		{
			showIndex: true,
			areas: props.templateOptions.areaInfo,
			onDeleteArea: props.onDeleteArea,
		},
	);
}

watch(()=> props.templateOptions, () => {
	update();
})
function update() {
	layer.value.update(props.templateOptions.rowNum, props.templateOptions.colNum, {
		showIndex: true,
		areas: props.templateOptions.areaInfo,
		onDeleteArea: props.onDeleteArea,
	});
}

onMounted(() => {
	nextTick(() => {
		init();
	});
})
defineExpose({
	layer: layer
})
</script>

<style scoped lang="less">
	.d-grid-select {
		width: 100%;
		height: 100%;
	}

	.d-layer {
		width: 100%;
		height: 100%;
	}
</style>
